<%--
  Created by IntelliJ IDEA.
  User: SuZePing
  Date: 2021/3/6
  Time: 12:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%@include file="/WEB-INF/include/include-head.jsp"%>
	<link rel="stylesheet" href="static/css/pagination.css">
	<script src="static/jquery/jquery.pagination.js"></script>
	<script type="text/javascript" src="static/js/DrugSellJS.js"></script>
	<script type="text/javascript">
		$(function () {
			// 分页数据初始化
			window.pageNum = 1;
			window.pageSize = 5;
			window.sellName = "";
			window.otherName = "";

			// 调用分页函数
			generateSellPage();

			// 关键字查询
			$("#selByKeyword").click(function () {
				window.sellName = $("#sellNameInput").val();
				window.otherName = $("#otherNameInput").val();
				// 页码初始化为第一页
				window.pageNum = 1;
				generateSellPage();
			});

			// 显示出售记录模态框并在下拉菜单中显示全部物品
			$("#addSell").click(function () {
				$.ajax({
					"url": "sell/getAllOther.json",
					"type": "get",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							var otherList = response.data;
							var select = $("select");
							// 清除原本<select>原数据
							select.empty();
							// 判断otherNameList是否有效
							if (otherList == null || otherList.length == 0){
								select.append("<option disabled>没有查询到数据!</option>");
								return;
							}
							select.append("<option selected hidden disabled>请选择购买产品</option>");
							// 填充<tbody>
							for (var i = 0;i < otherList.length;i++){
								var other = otherList[i];
								var otherName = other.otherName;
								var otherId = other.otherId;
								var option = "<option value='" + otherId + "'>" + otherName + "</option>"
								select.append(option);
							}
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
				$("#sellAddModal").modal("show");
			});

			// 根据购买数量显示金额
			$(".changeMoney").change(function () {
				var otherId = $("select option:selected").val();
				if (otherId == "请选择购买产品"){
					return false;
				}
				$.ajax({
					"url": "sell/getOtherPrice.json",
					"type": "post",
					"data": {
						"otherId":otherId
					},
					"dataType": "json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							var price = response.data;
							$("#addSellMoney").val($("#addSellTotal").val() * price);
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
			});

			// 出售记录
			$("#addSellSubmit").click(function () {
				var sellName = $.trim($("#addSellName").val());
				var otherId = $.trim($("#addOtherId").val());
				var sellTotal = $.trim($("#addSellTotal").val());
				var sellMoney = $.trim($("#addSellMoney").val());
				$.ajax({
					"url": "sell/save.json",
					"type": "post",
					"data": {
						"sellName":sellName,
						"otherId":otherId,
						"sellTotal":sellTotal,
						"sellMoney":sellMoney
					},
					"dataType": "json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg(response.msg);
						}else {
							// 关闭模态框
							$("#sellAddModal").modal("hide");
							// 清理模态框
							$("#addSellName").val("");
							$("#addOtherId").val("");
							$("#addSellTotal").val("");
							$("#addSellMoney").val("");
							var resultMap = response.data;
							layer.msg("售出记录成功，[" + resultMap.name + "]剩余" + resultMap.total + "件");
							// 显示到最后一页并重新加载分页数据
							var page = Math.floor(resultMap.count / window.pageSize);
							if (resultMap.count % window.pageSize != 0){
								page = page + 1;
							}
							window.pageNum = page;
							generateSellPage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
			});

			// 售出记录删除
			$("#sellPageTBody").on("click",".removeSellBtn",function () {
				var sellId = $(this).attr("sellId");
				if (confirm("您确认要删除该条记录？") == false){
					return false;
				}
				$.ajax({
					"url": "sell/del.json",
					"type": "post",
					"data":{
						"sellId":sellId
					},
					"dataType":"json",
					"success": function (response) {
						var result = response.code;
						if ("failed" == result){
							layer.msg("请求错误！说明：[" + response.msg + "]");
						}else {
							layer.msg("删除记录成功！");
							generateSellPage();
						}
					},
					"error": function (response) {
						layer.msg("请求失败！状态码：[" + response.status + "]，说明：[" + response.statusText + "]");
					}
				});
			});
		});
	</script>
</head>
<body>

<%@ include file="/WEB-INF/include/include-nav.jsp"%>
<div class="container-fluid">
	<div class="row">
		<%@include file="/WEB-INF/include/include-sidebar.jsp"%>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 id="title" class="panel-title"><i class="glyphicon glyphicon-th"></i> 售出记录</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline" role="form" style="float:left;">
						<div class="form-group has-feedback">
							<div class="input-group">
								<div class="input-group-addon">购买人</div>
								<input id="sellNameInput" class="form-control has-success" type="text" placeholder="请输入购买人姓名">
							</div>
							&nbsp;&nbsp;
							<div class="input-group">
								<div class="input-group-addon">售出产品</div>
								<input id="otherNameInput" class="form-control has-success" type="text" placeholder="请输入售出产品">
							</div>
						</div>
						&nbsp;&nbsp;
						<button id="selByKeyword" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
					</form>
					<button type="button" id="addSell" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 记录</button>
					<br>
					<hr style="clear:both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
							<thead>
							<tr>
								<th width="30">#</th>
								<th>购买人</th>
								<th>购买产品</th>
								<th>购买数量</th>
								<th>花费金额</th>
								<th>购买时间</th>
								<th width="100">操作</th>
							</tr>
							</thead>
							<tbody id="sellPageTBody">
							<%-- 手动渲染数据 --%>
							</tbody>
							<tfoot>
							<tr>
								<td colspan="7" align="center">
									<div id="Pagination" class="pagination"><%-- 显示Pagination分页 --%></div>
								</td>
							</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<%-- 引入出售记录模态框 --%>
<%@include file="/WEB-INF/modal/modal-sell-add.jsp"%>
</body>
</html>